import { useState, useEffect } from "react";
import "./Timer.css";

export const Timer = () => {
    const [count, setCount] = useState(0);
    useEffect(() => {
        const timeoutId = setTimeout(() => {
            setCount(count + 1);
        }, 1000);
        return () => clearTimeout(timeoutId);
    }, [count]);
    return (
        <div>
            <span id="timer">{count}</span>
        </div>
    );
}

export const Clock = ()=> {
    const [currentTime, setCurrentTime] = useState(new Date());
  // 添加定时器
    useEffect(() => {
        const timerID = setInterval(() => {
        setCurrentTime(new Date());
        }, 1000);

        return () => clearInterval(timerID);
    }, []);

    // 在顶部栏添加时间显示
    return (
        <div className="real-time-clock">
            {currentTime.toLocaleTimeString()}
        </div>
    );
    // 在顶部工具栏添加时间显示
}